<template>
  <div class="login">
    <div class="form">
      <div class="title">
        <p class="text-p">系统登录</p>
      </div>
      <el-form  
      label-width="100px" 
      class="demo-ruleForm"
      size="small"
      :model="formData"
      ref="form"
      :rules="rules"
      status-icon>
        <el-form-item  prop="account">
          <el-input v-model="formData.account" prefix-icon="iconfont icon-account" type="text"  autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  prop="password">
          <el-input  v-model="formData.password" prefix-icon="iconfont icon-lock"  :type="isPassword ? 'password' : 'text'"  autocomplete="off">
             <i @click=" isPassword = !isPassword" v-if="isPassword" slot="suffix" class="iconfont icon-eye-close"></i>
             <i @click=" isPassword = !isPassword" v-else slot="suffix" class="iconfont icon-eye-open"></i>
          </el-input>
          
        </el-form-item>
          <el-button class="btn" @click="submit" type="primary">登录</el-button>
        </el-form-item>
      </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { checkAccount, checkPassword } from "@/utils/tool";
import { checkLogin } from "@/api/user";
import local from "@/utils/local";

//引入创建路由函数
import { createRoutes } from "@/router"
export default {
  data() {
    return {
      formData: {
        account: "",
        password: "",
      },
      rules: {
        account: [{ validator: checkAccount, trigger: "blur" }],
        password: [{ validator: checkPassword, trigger: "blur" }],
      },
      isPassword: true,
    };
  },
  methods: {
    submit() {
      this.$refs.form.validate(async (value) => {
        if (value) {
          let res = await checkLogin({ ...this.formData });
          let { code, msg, role, token } = res.data;
          // window.localStorage.setItem('t_k',token)

          if (code === 0) {
            this.$message({
              message: "登录成功",
              type: "success",
            });
            local.set("t_k", token);
            local.set('role',role);
            // 登录时调用一次创建路由
            createRoutes()

            // this.$router.push('/')
            this.$router.push({ path: "/" });
          } else {
            this.$message.error(msg);
          }
          console.log(res);
        } else {
          console.log("验证不通过");
        }
      });
    },
  },
  created() {
    let that = this;
    document.onkeydown = function (e) {
      e = window.event || e;
      if (
        that.$route.path == "/login" &&
        (e.code == "Enter" || e.code == "enter")
      ) {
        //验证在登录界面和按得键是回车键enter
        that.submit("submit"); //登录函数
      }
    };
  },
};
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  background: #304156;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form {
  width: 350px;
  height: 240px;
  .text-p {
    margin-bottom: 10px;
    color: white;
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    letter-spacing: 2px;
    color: white;
  }
  .btn {
    width: 100%;
  }
  ::v-deep .el-input__inner {
    background: transparent;
    color: white;
  }
}
::v-deep .el-form-item__content {
  margin: 0 !important;
}
</style>